<template>
    <ZWDialog
        :title="(state.title as string)"
        :width="(state.width as string)"
        :show="isShowDialog"
        @close="closeDialog"
        @cancel="cancelDialog"
        @confirm="confirmDialog">
        <div class="content">
            <div class="tips">
                <p v-for="item in tips" :key="item" class="text">{{ item }}</p>
            </div>
            <div class="handel—box">
                <span @click="add">前往配置小程序>></span>
                <span class="refresh" @click="init">
                    <el-icon class="icon"><refresh-right /></el-icon>刷新
                </span>
            </div>
            <el-scrollbar class="mini_program">
                <div class="mini_program_box">
                    <el-tooltip
                        v-for="item in miniPrograms.data"
                        :key="item.id"
                        placement="top"
                        trigger="hover"
                        :disabled="isAuth(item)"
                        effect="dark"
                        :content="tooltipText">
                        <div
                            class="mini_program_item"
                            :class="{ selected: isAuth(item) && item.selected, isHover: isAuth(item) }"
                            @mouseenter="handleMouse(item)"
                            @click="isAuth(item) && select(item)">
                            <div class="head">
                                <Image
                                    :src="item.head_image"
                                    :width="64"
                                    :height="64"
                                    default-src="/static/file/miniApp.png" />
                                <div class="name">
                                    <p :class="{ dis_name: !isAuth(item) }">{{ item.nickname }}</p>
                                    <p>{{ item.principal_name }}</p>
                                </div>
                            </div>
                            <div class="foot">
                                <div class="relevancy">
                                    <img
                                        :src="`/static/material/authentication${item.status === 8 ? '' : '2'}.png`"
                                        alt="" />
                                    <div class="text">运行中</div>
                                </div>
                                <div class="relevancy">
                                    <img
                                        :src="`/static/material/subject${item.is_principal === 2 ? '1' : '2'}.png`"
                                        alt="" />
                                    <div class="text">同一主体</div>
                                </div>
                                <div class="relevancy">
                                    <img
                                        :src="`/static/material/platform${item.have_open === 2 ? '' : '2'}.png`"
                                        alt="" />
                                    <div class="text">已绑定</div>
                                </div>
                            </div>
                            <div class="mark">
                                <el-icon><Check /></el-icon>
                            </div>
                        </div>
                    </el-tooltip>
                    <div class="mini_program_item mini_program_add" @click="add">
                        <el-icon class="plus"><Plus /></el-icon>
                        <span class="add">添加营销小程序</span>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </ZWDialog>
</template>

<script setup lang="ts">
import { reactive, ref, computed, watch, onBeforeMount, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import ZWDialog from '@/components/zw/dialog/Dialog';
import Image from './Image.vue';
import { getMarketingAppletList } from '@/api/channelconfig/marketingApplet';
import { setOAAndMP } from '@/api/content/channelFootage/common';
import { ElMessage } from 'element-plus';

const router = useRouter();

interface StateType {
    [propsName: string]: string | number;
}

const state = reactive<StateType>({
    title: '选择小程序',
    width: '920'
});
const miniPrograms = ref<any>({
    basic_info: {
        principal_name: ''
    },
    data: null
});

// 文案
const tips = ref<Array<string>>([
    '1、请确保所选择公众号公司主体及公众号绑定开放平台主体与企业微信为同一公司主体，否则公众号用户数据与企微外部联系人数据无法关联；',
    '2、需注意要关联企业微信，未关联在企业微信将不能通过小程序发送内容。'
]);

const selectId = ref<number>(0);
const tooltipText = ref<string>('');
const props = withDefaults(
    defineProps<{
        show: boolean;
        type: number;
        id: number;
    }>(),
    {
        show: false,
        type: 1,
        id: 0
    }
);

const emit = defineEmits(['update:show', 'submit']);

const isShowDialog = computed({
    get: () => props.show,
    set: (val: boolean) => emit('update:show', val)
});
// 判断小程序的权限
const isAuth = (item: any) => {
    const { status, is_principal, have_open } = item;
    if (status !== 8) {
        return false;
    } else if (have_open !== 2) {
        return false;
    } else if (is_principal !== 2) {
        return false;
    }
    return true;
};

const handleMouse = (item: any) => {
    const { status, is_principal, have_open } = item;
    if (status !== 8) {
        tooltipText.value = '小程序未完成授权发布流程，该小程序无法使用';
    } else if (have_open !== 2) {
        tooltipText.value = '未绑定微信开放平台，请进行绑定后再选择';
    } else if (is_principal !== 2) {
        tooltipText.value = '该小程序所绑定微信开放平台主体不一致';
    }
};

const closeDialog = () => {
    isShowDialog.value = false;
};

const cancelDialog = () => {
    isShowDialog.value = false;
};

const confirmDialog = async () => {
    const module_type = 2; // 模块类型： 1公众号， 2小程序
    const mini_program_id = selectId.value;
    const media_type = props.type; // 1-文本 2-图片 3-音频 4-视频 5-文件 6-链接文章 7-链接引用 8-抽奖裂变 9-短链
    const params = { module_type, mini_program_id, media_type };
    if (!mini_program_id) {
        ElMessage.warning('请选择小程序');
        return;
    }
    if (await setOAAndMP(params)) {
        isShowDialog.value = false;
        emit('submit', selectId.value);
    }
};

const select = (item: any) => {
    miniPrograms.value.data.forEach(ite => (ite.selected = false));
    item.selected = true;
    selectId.value = item.id;
};

const add = () => {
    const path = '/channelconfig/qywechat/marketingApplet';
    window.open(path, '_blank');
};

const init = async () => {
    selectId.value = props.id;
    const page = 1;
    const page_size = 100; // 暂时不做分页
    const form = 2; // 手动刷新时才需要该参数，获取最新的数据
    const params = { page, page_size, verify_status: '', mini_program_type: 1, form };
    const res = await getMarketingAppletList(params);
    if (res.data.length > 0) {
        res.data = res.data.map((item: any) => {
            item.selected = item.id === props.id;
            return item;
        });
    }
    miniPrograms.value = res;
};
init();
</script>

<style lang="scss" scoped>
.content {
    .tips {
        background-color: #fffaf9;
        padding: 12px;

        .text {
            line-height: 1.6;
            color: #33302d;
            font-size: 14px;
        }
    }

    .handel—box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #ff6b00;
        margin: 16px 0;

        span {
            cursor: pointer;

            .icon {
                vertical-align: middle;
                font-size: 16px;
                margin: 0 1px 1px 0;
            }
        }
    }

    .mini_program {
        height: 450px;

        .mini_program_box {
            // padding: 16px 0 0;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 14px;

            .mini_program_item {
                max-height: 129px;
                padding: 10px;
                border-radius: 6px;
                border: #eee 1px solid;
                box-sizing: border-box;
                box-shadow: 0 0 10px #f6f6f6;
                position: relative;
                overflow: hidden;
                cursor: pointer;

                .head {
                    display: flex;
                    align-items: center;

                    .name {
                        flex: 1;
                        width: 0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-left: 8px;
                        font-size: 14px;
                        font-weight: 700;
                        color: #333;

                        .dis_name {
                            color: #969696;
                        }

                        p:last-of-type {
                            color: #969696;
                            font-size: 12px;
                            margin-top: 12px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }

                .foot {
                    margin-top: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    & > div {
                        display: flex;
                        align-items: center;

                        img {
                            width: 16px;
                            height: 16px;
                        }

                        .text {
                            font-size: 12px;
                            color: #666;
                            margin-left: 4px;
                        }
                    }

                    .relevancy:last-of-type {
                        img {
                            height: 14px;
                        }
                    }
                }

                .mark {
                    display: none;
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 36px;
                    height: 36px;
                    background: linear-gradient(225deg, #ff6b00, #ff6b00 50%, transparent 50%, transparent 100%);

                    .el-icon {
                        color: #fff;
                        font-size: 20px;
                        position: absolute;
                        top: 1px;
                        right: 1px;
                    }
                }
            }

            .isHover:hover {
                border-color: #ff6b00;
            }

            .mini_program_add {
                height: 112px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;

                .plus {
                    font-size: 30px;
                    color: #666;
                }

                .add {
                    font-size: 14px;
                    color: #888;
                }
            }

            .selected {
                border-color: #ff6b00;

                .mark {
                    display: block;
                }
            }
        }
    }
}
</style>
